<template>
  <div class="all">
    <!-- 头部固定导航栏 -->
    <van-nav-bar
      title="收货地址"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 用户收货地址 -->
    <div class="user_address">
      <address-base v-for="item in addressList" :key="item.address_id" :item="item"></address-base>
    </div>
    <!-- 底部添加新地址 -->
    <div class="footer">
      <button @click="$router.push('/addAddress')">添加新地址</button>
    </div>
  </div>

</template>

<script>
import { getUserAddress } from '@/api/address'
import AddressBase from '@/components/AddressBase.vue'
export default {
  components: { AddressBase },
  data () {
    return {
      addressList: []
    }
  },
  name: 'PayAddress',
  async created () {
    const { data: { list } } = await getUserAddress()
    this.addressList = list
    console.log(list)
  }
}
</script>

<style scoped>
.all {
  padding:10px;
  background:rgb(215, 211, 211);
}
/* 底部添加新地址 */
.footer {
  width:95%;
  position:fixed;
  bottom:0;
  background: white;
  justify-content:center;
}
.footer button {
  width:100%;
  height:50px;
  background:orange;
  color:white;
  border-radius:50px;
  border:none;
}
</style>
